@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
	--turquoise: #33D4D1;
	--blue: #1778B5;
	--gray: #D1D1D1;
	--darkgray: #8F8F8F;
	--yellow: #ECF65C;
	--transparent-yellow: rgba(236,246,92,.1);
	--offwhite: #fefefe;
}


html {
	font-size: 14px;
}

body {
	background-color: #fff;
	font-family: 'Rubik', sans-serif;
}

h1, h2 {
	text-transform: uppercase;
	font-weight: 500;
	color: var(--turquoise);
}

h1 {
	margin:0;
	font-size:2.5rem;
}

h1 span {
	color: #000;
}

h2 {
	grid-column: span 2;
	text-indent: 1em;
	border-bottom: 2px solid var(--blue); 
	line-height: 0.1em;
	margin: 1rem 0 2rem; 
	font-size:1.5rem;
} 

h2 span { 
    background:#fff; 
    padding:0 .5em; 
}

form h2 {
	color: #fff;
	border-bottom: 2px solid #fff; 
}
form h2 span { 
    background:var(--turquoise); 
}

p {
	margin:0;
}

body {
	margin:2rem 6rem;
}

.wrapper {
	display:grid;
    grid-template-columns: 1fr 2fr;
	gap:2rem 4rem;
	max-width: 1000px;
}

header {
	grid-column: span 2;
	display:grid;
	grid-template-columns: 1fr 2fr;
	gap: 4rem;
}

aside>div, form {
	background-color: var(--turquoise);
	padding:1rem;
	border-radius: 10px;
    box-shadow: 4px 4px 0px var(--gray);
}

aside {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap:2rem;
}

aside>div {
	background-color: var(--blue);
	color: #fff;
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap:2rem;
}

img {
	width:120px;
	float:left;
	border:3px solid white;
	margin:0 1rem 1rem 0;
	border-radius: 50%;
    shape-outside: circle(50% at calc(55% - 0.5rem) calc(50% - .5rem));
}

#contact {
	display: grid;
	grid-template-columns: repeat(2,max-content);
	gap: 1rem;
}

#social {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 1rem;
}


#social i {
	font-size: 2em;
}

a {
	color:inherit;
	text-decoration: none;
	transition: all .3s;
}

#contact a:hover, #social a:hover, #projects a:hover i {
	color:var(--yellow);
}

a:active {
	transform: scale(1.1);
}


span a {
	display: inline-block;
}

input, textarea, button {
	padding: .3rem;
	box-sizing: border-box;
	margin-bottom:1rem;
	outline:0;
}

input, textarea, label {
	font-family: "courier";
	font-size: 14px;
}

input, textarea {
	width:100%;
	background-color: var(--offwhite);
	border: none;
	border-radius: 0;
	border-bottom: 2px solid var(--darkgray);
}

input:hover, textarea:hover, input:focus, textarea:focus {
	border-bottom:2px solid var(--yellow);
}

form div {
	position:relative;
}

label {
	position: absolute;
	top:.3rem;
	left:.3rem;
	color: #8F8F8F;
}

input {
	padding-left:5rem;
}

button {
	background-color: #fefefe;
	border: none;
	border-radius: 10px;
	width:100%;
	text-transform: uppercase;
	color:#8F8F8F;
	font-weight: 600;
}

button:hover {
	background-color:var(--yellow);
}

button:active {
    box-shadow: inset 2px 2px 1px var(--gray), inset -2px -2px 1px #fff;
}

textarea {
	resize: vertical;
}

#form-message {
	margin-bottom: 1rem;
	color: white;
}

main {
	display:grid;
	gap:3em;
	align-content:start;
}

#skills > div {
	display: flex;
	flex-wrap: wrap;
	/*grid-template-columns: repeat(5,max-content);*/
	gap: 1rem 3rem;
	/*font-size:1.4rem;*/
}

#skills i {
	color: var(--blue);
}

i ~ span, object ~ span {
	padding-left:.5em;
}

object {
	display: inline;
	height: 1rem;
	position: relative;
	top: .2rem;
}



#languages>div {
	display:grid;
	grid-template-columns: max-content auto;
	gap:.3rem 2rem;
}


.native:before, .advanced:before, .intermediate:before {
	z-index: -1;
	content: "";
	position: absolute;
	height: 100%;
	background-image:
    linear-gradient(to right, var(--transparent-yellow), var(--yellow) 75%);
	border-radius: 1rem;
}

.native:before {
	width: 100%;
}

.advanced:before {
	width: 75%;
}

.intermediate:before {
	width: 50%;
}

#languages span {
	padding-left: .3rem;
}

.native, .advanced, .intermediate {
    position: relative;
}

.advanced {
	padding-right: 25%;
}

.intermediate {
	padding-right: 50%;
}

.item-wrapper {
	display: grid;
	gap:1.5rem;
}

.yearly .item {
	display: grid;
	grid-template-columns: 11rem auto;
	gap:.3rem 1rem;
}

.yearly .item div:first-child, .yearly .item div:nth-child(2) {
	font-size: 1.2rem;
	color: var(--blue);
}

.yearly .item div:nth-child(2) {
	font-weight: 500;
	text-transform: uppercase;
}

#projects .item {
	/*display: grid;*/
	/*grid-template-columns: auto;*/
	/*gap:.3rem 1rem;*/
}

#projects .item div:nth-child(2) {
	/*grid-column: span 2;*/
	font-size: 1.2rem;
	color: var(--blue);
	font-weight: 500;
	text-transform: uppercase;
}

.description {
	font-size: 1rem;
	color: #000;
	font-weight: 400;
	text-transform: none;
	font-style: italic;
}

/*#projects .item div:nth-child(3) {*/
    /*display: grid;*/
    /*align-content: start;*/
    /*gap: .3rem;	*/
/*}*/

.link-wrapper {
	font-size: 1rem;
	color: var(--blue);
	font-weight: 500;
	text-transform: none;
	position: relative;
    top: .2rem;}

.link-wrapper i {
	position: relative;
	top: .1rem;
}

ul {
    display: grid;
    gap: .3rem;
	list-style-type: "– ";
	list-style-position: inside;
	padding:0;
	margin:0;
}

li {
	padding:0;
}